import React, { memo, Component } from 'react'
import { Image, Avatar, Button, Input, Select, message, Form, Upload, Modal } from 'antd'
import { StudentInfo } from '../../utils/model'
import './index.css'
import { baseUrl } from '../../assets/baseUrl'
import { PlusOutlined } from '@ant-design/icons';
// import {getUserInfo,getSchoollist,getClasslist,setMyBasicInfo} from '@/api/user'
const BaseUrl = baseUrl()
const { Option } = Select

const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => resolve(reader.result);

    reader.onerror = (error) => reject(error);
  });

class PersonnalSet extends Component {
  static contextType = StudentInfo
  constructor(props) {
    super(props)
    this.state = {
      studentId:null,
      previewVisible:false,
      previewTitle:'',
      previewImage:'',
      backpicList:[{
        uid: '-1',
        name: 'image.png',
        status: 'done',
        url: 'https://www.donglongdong.xyz/images/upload/allback.png',
      }]
    }
  }
  componentDidMount() {
    this.setState({
      studentId: this.context?.studentInfo?.studentId
    })
  }

  onFinish = (values) => {
    console.log('Success:', values)
  }

  onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

  handlePreview = async (file) => {
    console.log(file);
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    console.log('enter');
    this.setState({
      previewImage: file.url || file.previe,
      previewVisible: true,
      previewTitle:file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
    })
  };

  handleChange = ({ fileList }) => {
    this.setState({
      backpicList: fileList
    })
  }

  render() {
    const {backpicList,previewTitle,previewVisible,previewImage,studentId} = this.state

    const uploadButton = (
      <div>
        <PlusOutlined />
        <div
          style={{
            marginTop: 8,
          }}
        >
          上传背景
        </div>
      </div>
    );

    return (
      <div
        className="setting-opration permission"
        style={{ paddingLeft: '7vw',display:'block' }}
      >
        <Form
          name="basic"
          // labelCol={{ span: 8 }}
          // wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="背景图"
            name="backPicUrls"
          >
            <Upload
              action="https://www.donglongdong.xyz/fileUpload"
              data={{useMethod:'上传背景图',studentId:studentId}}
              listType="picture-card"
              fileList={backpicList}
              onPreview={this.handlePreview}
              onChange={this.handleChange}
            >
              {backpicList.length >= 0 ? null : uploadButton}
            </Upload>
            <Modal
              visible={previewVisible}
              title={previewTitle}
              footer={null}
              width={1200}
              onCancel={()=>{this.setState({previewVisible:false})}}
            >
              <img
                alt="example"
                style={{
                  width: '100%'
                }}
                src={previewImage}
              />
            </Modal>
          </Form.Item>

          {/* <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item> */}
        </Form>
      </div>
    )
  }
}
export default memo(PersonnalSet)
